<?xml version="1.0" encoding="UTF-8"?>
<ui:decorate  template="/xhtml/plantillas/baseSeguridad.xhtml"
              xmlns:p="http://primefaces.org/ui"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:ui="http://java.sun.com/jsf/facelets">    

    <ui:define name="titulo">#{label['administracion.usuarios']}</ui:define>

    <ui:define name="java_script">
        <script type="text/javascript"> 
            function enmascarar(){
                $(document).ready(function(){
                    $('#form_conci\\:id_fecha_nac').mask('99/99/9999');                    
                });
            }

            function handleLoginRequest(xhr, status, args) {                  
                if(args.validationFailed || !args.loggedIn) {                                
                    dlg2.show();  
                    jQuery('#dialog').effect("shake", { times:3 }, 100);  
                } else {                                     
                    dlg2.hide();  
                    
                }  
            }  
        </script>  
    </ui:define>   

    <ui:define name="contenido">           
        <h:outputText value="#{label['administracion.usuarios']}" class="encabezado"/>                   
        <hr id="horizontalLine" style="width: 800px; margin-left: 20px"/> 
        <h:panelGrid columns="10" class="panelFormulario" >
            <p:accordionPanel activeIndex="#{beanAdministrarUsuario.numero}" style="margin-top: 20px; width: 800px" >  
                <p:tab title="Usuario" >         

                    <p:fieldset id="fiel" legend="Información Personal" style="text-align: left">
                        <p:panelGrid>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['identificacion']}"/>
                                </p:column> 
                                <p:column>  
                                    <p:inputText id="id_idd"  value="#{beanAdministrarUsuario.identificacion}" style="width: 250px" maxlength="20">
                                        <p:ajax event="change" listener="#{beanAdministrarUsuario.accionIdentificacion}" update=":form_conci"/>
                                    </p:inputText>                                        
                                </p:column>
                            </p:row>                            
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['nombre']}"/>                
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_nombre" value="#{beanAdministrarUsuario.nombre}" disabled="#{!beanAdministrarUsuario.habilitar}"
                                                 style="width: 250px" maxlength="30"/>                                                                                       
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['apellido1']}"/>               
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_apellido1" value="#{beanAdministrarUsuario.apellido1}" disabled="#{!beanAdministrarUsuario.habilitar}"
                                                 style="width: 250px" maxlength="30"/>                                    
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['apellido2']}" />               
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_apellido2" value="#{beanAdministrarUsuario.apellido2}" disabled="#{!beanAdministrarUsuario.habilitar}"
                                                 style="width: 250px" maxlength="30"/>                                    
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['nacionalidad']}" escape="false"/>
                                </p:column>
                                <p:column>
                                    <p:inputText id="id_nacionalidad" value="#{beanAdministrarUsuario.nacionalidad}" disabled="#{!beanAdministrarUsuario.habilitar}"
                                                 style="width: 250px" maxlength="50"/>                                    
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['email']}" escape="false"/>
                                </p:column>
                                <p:column>                                                                    
                                    <p:inputText id="id_email"  value="#{beanAdministrarUsuario.email}" disabled="#{!beanAdministrarUsuario.habilitar}"
                                                 style="width: 250px" maxlength="30"/>                                    
                                </p:column>
                            </p:row>                            
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['fecha.nacimiento']}" escape="false"/>
                                </p:column>
                                <p:column>
                                    <p:calendar id="id_fecha_nac"                                         
                                                pattern="dd/MM/yyyy"  
                                                style="width: 250px;" maxlength="10"
                                                navigator="true" effect="slide"
                                                value="#{beanAdministrarUsuario.fecha_nacimiento}" disabled="#{!beanAdministrarUsuario.habilitar}"                                                 
                                                onfocus="enmascarar();"
                                                >
                                        <f:validator validatorId="DateValidator"/>
                                    </p:calendar> 
                                </p:column>                        
                            </p:row>

                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['sexo']}" escape="false"/>
                                </p:column>                           
                                <p:column>
                                    <p:selectOneMenu id="id_sexo"  value="#{beanAdministrarUsuario.sexo}" disabled="#{!beanAdministrarUsuario.habilitar}"
                                                     effect="fold" style="width: 150px">  
                                        <f:selectItem itemLabel="" itemValue=""  />  
                                        <f:selectItem itemLabel="Masculino" itemValue="M" />  
                                        <f:selectItem itemLabel="Femenino" itemValue="F" />              
                                    </p:selectOneMenu>                                     
                                </p:column>                    
                            </p:row>
                            <p:row>

                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['telefono1']}" escape="false"/>
                                </p:column>
                                <p:column>                                                                    
                                    <p:inputMask id="id_telefono1" mask="9999-9999"  value="#{beanAdministrarUsuario.telefono1}" disabled="#{!beanAdministrarUsuario.habilitar}"
                                                 style="width: 150px; text-align: center"/>                               
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>                        
                                    <h:outputText  styleClass="etiqueta" value="#{label['telefono2']}" escape="false"/>
                                </p:column>                        
                                <p:column>                        
                                    <p:inputMask id="id_telefono2" value="#{beanAdministrarUsuario.telefono2}" disabled="#{!beanAdministrarUsuario.habilitar}"
                                                 mask="9999-9999"  style="width: 150px; text-align: center"/>   
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['tipo']}" escape="false"/>
                                </p:column>  
                                <p:column>  
                                    <p:selectOneMenu id="id_tipo" value="#{beanAdministrarUsuario.tipo}" disabled="#{!beanAdministrarUsuario.habilitar}"
                                                     effect="fold" style="width: 150px">  
                                        <f:selectItem itemLabel="" itemValue="" />  
                                        <f:selectItem itemLabel="Administrador" itemValue="A" />  
                                        <f:selectItem itemLabel="Usuario" itemValue="U" />              
                                    </p:selectOneMenu>  
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['estado.civil']}" escape="false"/>
                                </p:column>  
                                <p:column>  
                                    <p:selectOneMenu id="id_estado_civil" value="#{beanAdministrarUsuario.estadoCivil}" disabled="#{!beanAdministrarUsuario.habilitar}"
                                                     effect="fold" style="width: 150px">  
                                        <f:selectItem itemLabel="" itemValue=" " />  
                                        <f:selectItem itemLabel="Soltero" itemValue="S" />  
                                        <f:selectItem itemLabel="Casado" itemValue="C" />              
                                        <f:selectItem itemLabel="Divorsiado" itemValue="D" />              
                                        <f:selectItem itemLabel="Viudo" itemValue="V" />              
                                    </p:selectOneMenu>  
                                </p:column>
                            </p:row>                            
                            <p:row>
                                <p:column>                           
                                    <h:outputText  styleClass="etiqueta" value="#{label['estado']}" escape="false"/>
                                </p:column>  
                                <p:column>
                                    <p:selectOneMenu id="id_estado" disabled="#{!beanAdministrarUsuario.habilitar}"
                                                     effect="fold"
                                                     style="width: 150px;"
                                                     value="#{beanAdministrarUsuario.estado}"                                                  
                                                     >
                                        <f:selectItem itemLabel="" itemValue="0"/>
                                        <f:selectItems value="#{beanAdministrarUsuario.lista_estados}"
                                                       var="estado"
                                                       itemLabel="#{estado.nombre}"
                                                       itemValue="#{estado.id_estado}" />                                    
                                    </p:selectOneMenu>   
                                </p:column>
                            </p:row>                            
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['direccion']}" style="width: 250px"/>
                                </p:column>
                                <p:column>
                                    <p:inputTextarea id="id_direccion" value="#{beanAdministrarUsuario.direccion}" disabled="#{!beanAdministrarUsuario.habilitar}"
                                                     style="width: 250px; height: 35px" maxlength="200" />                                                                            
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['password']}" style="width: 250px"/>
                                </p:column>
                                <p:column>
                                    <p:password id="passwd" value="#{beanAdministrarUsuario.password}" disabled="#{beanAdministrarUsuario.existe}"
                                                style="width: 250px" maxlength="30">                                        
                                    </p:password>
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column>
                                    <h:outputText  styleClass="etiqueta" value="#{label['repetir.password']}" escape="false"/>
                                </p:column>
                                <p:column>
                                    <p:password id="rep_passwd" value="#{beanAdministrarUsuario.rep_password}" disabled="#{beanAdministrarUsuario.existe}"
                                                style="width: 250px" maxlength="30" >                                        
                                    </p:password>                                
                                </p:column>                            
                                <p:column>                        
                                    <p:commandButton icon="ui-icon-info" title="Cambiar Contraseña" 
                                                     actionListener="#{beanAdministrarUsuario.tocarBoton()}"
                                                     onclick="dlg2.show();"
                                                     rendered="#{beanAdministrarUsuario.mostrar_boton}" type="button" style="margin-left: 10px">

                                    </p:commandButton>                                                     
                                </p:column>
                            </p:row>                              
                        </p:panelGrid>
                    </p:fieldset>
                    <p:column><p:commandButton value="#{label['limpiar']}" icon="ui-icon-arrow-4-diag" action="#{beanAdministrarUsuario.limpiarCampos()}"
                                               update=":form_conci" style="margin-left: 400px"/></p:column>
                    <p:column><p:commandButton value="#{label['eliminar']}" icon="ui-icon-trash" disabled="#{!beanAdministrarUsuario.modificar}"
                                               onclick="confirmation.show()" /></p:column>
                    <p:column><p:commandButton value="#{label['guardar']}"  icon="ui-icon-disk" action="#{beanAdministrarUsuario.guardarUsuario()}"
                                               update=":form_conci"/></p:column>                 

                </p:tab>  
            </p:accordionPanel>     
        </h:panelGrid>
        <p:fieldset legend="Lista de Usuarios" style="width: 785px">
            <p:dataTable id="dataTable" var="usuario"  
                         rows="5" value="#{beanAdministrarUsuario.lista_usuarios}"                           
                         rowsPerPageTemplate="5,10,15" selectionMode="single" 
                         selection="#{beanAdministrarUsuario.persona_tabla}"
                         rowKey="#{usuario.identificacion}"
                         paginator="true"
                         filterEvent="enter"
                         paginatorPosition="bottom">  

                <p:ajax  event="rowSelect"  update=":form_conci" 
                         listener="#{beanAdministrarUsuario.modificarUsuario()}"/>

                <p:column headerText="Nombre" filterBy="#{usuario.nombre}" style="text-align: center" filterMatchMode="contains">                      
                    <h:outputText value="#{usuario.nombre}" />  
                </p:column>  

                <p:column headerText="Primer Apellido" filterBy="#{usuario.apellido1}" style="text-align: center" filterMatchMode="contains">                      
                    <h:outputText value="#{usuario.apellido1}" />  
                </p:column>  

                <p:column headerText="Segundo Apellido" filterBy="#{usuario.apellido2}"  style="text-align: center" filterMatchMode="contains">                      
                    <h:outputText value="#{usuario.apellido2}" />  
                </p:column>  

                <p:column headerText="Identificación" filterBy="#{usuario.identificacion}" style="text-align: center" filterMatchMode="contains">                      
                    <h:outputText value="#{usuario.identificacion}" />  
                </p:column>  
            </p:dataTable>  
        </p:fieldset>


        <p:dialog id="dialog" header="Cambiar Contraseña" widgetVar="dlg2" 
                  showEffect="clip" hideEffect="explode" modal="true" height="135">  
            <p:ajax event="close" update=":form_conci"/> 
            <p:panelGrid>
                <p:row>
                    <p:column>
                        <h:outputText  styleClass="etiqueta" value="#{label['contraseña.actual']}"/>                
                        <p:password id="act_pass" value="#{beanAdministrarUsuario.aPassword}">                                
                        </p:password>                            
                    </p:column>
                </p:row>
                <p:row>
                    <p:column>
                        <h:outputText  styleClass="etiqueta" value="#{label['contraseña.nueva']}"/>               
                        <p:password id="new_pass" value="#{beanAdministrarUsuario.nPassword}">                                
                        </p:password>                            
                    </p:column>
                </p:row>
                <p:row>
                    <p:column>
                        <h:outputText  styleClass="etiqueta" value="#{label['repetir.password']}" />               
                        <p:password id="rep_new_passwd" value="#{beanAdministrarUsuario.rPassword}">                                
                        </p:password>                            
                    </p:column>
                </p:row>
                <p:row>
                    <p:column>
                        <p:commandButton id="loginButton" value="Aceptar" style="margin-left: 275px" 
                                         update=":form_conci"
                                         actionListener="#{beanAdministrarUsuario.cambiarPassword(actionEvent)}"   
                                         oncomplete="handleLoginRequest(xhr, status, args)"/>
                    </p:column>
                </p:row>
            </p:panelGrid>
        </p:dialog>  

        <p:confirmDialog id="confirmDialog" message="Esta seguro que desea eliminar el usuario seleccionado?"  
                         header="Eliminar Usuario" severity="alert" widgetVar="confirmation">  

            <p:commandButton id="confirm" value="Aceptar" action="#{beanAdministrarUsuario.eliminarUsuario()}"
                             oncomplete="confirmation.hide()" update=":form_conci"/>  
            <p:commandButton id="decline" value="Cancelar" onclick="confirmation.hide()" type="button" />   

        </p:confirmDialog>              
    </ui:define>
</ui:decorate>
